<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .con {
            border-top: 10px solid #f5f5f5;
        }

        .form {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            border-bottom: 1px solid #e5e5e5;
            margin: 0 15px;
            padding: 10px 0;
        }

        .form label {
            display: block;
            font-size: 15px;
            color: #333;
        }

        .form input {
            flex: 1;
            -webkit-flex: 1;
            font-size: 15px;
            color: #333;
            text-align: right;
            padding: 15px 0;
            border: none;
        }

        input:disabled {
            background: #fff;
        }

        .bind {
            width: 80%;
            display: block;
            margin: 40px auto 0;
            height: 45px;
            font-size: 15px;
            color: #fff;
            border-radius: 5px;
            border: none;
            background: #019dff;
        }

        .success {
            text-align: center;
            font-size: 15px;
            padding: 150px 15px 0;
        }

        .success img {
            display: block;
            width: 37px;
            height: 37px;
            margin: 0 auto 15px;
        }
    </style>
</head>
<body>
<div class="success" th:if="${saUser} ne null">
    <img src=""/>
    你已绑定分账账号
</div>
<div class="con" th:unless="${saUser}">
    <div class="form">
        <label>openId：</label>
        <input name="openId" th:value="${openId}" disabled/>
    </div>
    <div class="form">
        <label>用户编号：</label>
        <input name="id" value="" placeholder="请输入分账用户编号"/>
    </div>
    <button type="button" onclick="confirmBindAccount();" class="bind">确定绑定</button>
</div>
<script type="text/javascript">
    function confirmBindAccount() {
        var openId = $('input[name="openId"]').val();
        if (!openId) {
            alert('openid 为空，请刷新页面重试');
            return false;
        }
        var id = $('input[name="id"]').val();
        if (!id) {
            alert('请输入分账用户编号');
            return false;
        }
        $.post('/prod-api/bindAccount', {openId: openId, id: id}, function (json) {
            if (json.code !== 200) {
                alert(json.msg ? json.msg : '绑定失败');
            } else {
                alert('绑定成功！');
            }
        }, 'json')
    }
</script>
</body>
</html>
